html,
body {

    background-color: #ccc;
}

body {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

header {

   

    overflow: auto;
    background-color: #fff;

    display: flex;
    flex-direction: column;

    justify-content: space-around;

    .me-info {

        display: flex;
        justify-content: flex-start;

        .me-picture {
            height: 100px;
            width: 100px;
            border: 1px solid pink;
            border-radius: 50%;
            overflow: hidden;

            img {
                height: 100px;
                width: 100px;
            }
        }

        .id-name {
            font-size: 20px;
            align-self: center;
        }

    }

    .sign {
        color: #666;
        display: flex;
        justify-content: flex-start;

    }


}

// ko ko 

.all-infos {

    background-color: #ccc;
    // overflow: auto;


    width: 100%;
    display: flex;

    justify-content: flex-start;

    flex-direction: column;

    .mine-all {
        margin-top: 6%;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }

    div {
        div {
            background-color: #fff;
        }
    }





    .motion-data {
        // margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        width: 100%;

        padding: 20px 10px;

        .m-goto {

            text-align: right;

            flex: 1;

            align-self: flex-end;
        }

    }

    .motion-info {
        display: flex;
        justify-content: flex-start;

        // div {
        //     flex: 1;

        // }

        p {
            font-size: 14px;
            color: #8a8a8a;
        }

        .all-time {
            width: 40%;
            p {
                border-right: 1px dashed gray;
            }

            div {
                border-right: 1px dashed gray;
            }

        }

    }




    .motion-badge {

        display: flex;
        justify-content: space-between;
        flex-direction: column;

        text-align: center;

        .my-badge {
            padding: 20px 10px;

            display: flex;
            justify-content: flex-start;
            flex: 1;

            .lastone {
                text-align: right;
                flex: 1;
                align-self: flex-end;
            }

        }

        .p-badge {
            display: flex;
            justify-content: space-between;




            div {

                overflow: hidden;


                img {
                    width: 50%;
                }
            }

        }


    }

    .login-out {


        padding: 15px 0;
        font-size: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

}





footer {
    // height: 85px !important;
    background-color: #fff;

    #mine {
        color: skyblue;
    }

    #exercise {
        color: black;
    }

    #mIndex {
        color: black;
    }
}